<template>
  <div>
    <el-input v-model="search"
              placeholder="请输入搜索内容"
    ></el-input>
    <el-table
      :data="tables.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      style="width: 100%">
      <el-table-column
        prop="jobNumber"
        label="工号">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="date"
        label="日期">
      </el-table-column>
      <el-table-column
        prop="hour"
        label="时间段">
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型">
      </el-table-column>
    </el-table>
    <el-pagination
      id="myPage"
      @current-change="handleCurrentChange"
      background
      :current-page="currentPage"
      :page-size="pageSize"
      layout="prev, pager, next, jumper"
      hide-on-single-page
      :total="tables.length">
    </el-pagination>
  </div>
</template>

<script>
  import {mapActions} from 'vuex'

  export default {
    name: "Schedule",
    data() {
      return {
        tableData: [
          {jobNumber: '0001', name: '小明', date: '2016-05-01', hour: '08:00-14:00', type: '早班'},
          {jobNumber: '0001', name: '小明', date: '2016-05-02', hour: '08:00-14:00', type: '早班'},
          {jobNumber: '0001', name: '小明', date: '2016-05-03', hour: '08:00-14:00', type: '早班'},
          {jobNumber: '0001', name: '小明', date: '2016-05-04', hour: '08:00-14:00', type: '早班'},
          {jobNumber: '0001', name: '小明', date: '2016-05-05', hour: '08:00-14:00', type: '早班'},
          {jobNumber: '0001', name: '小明', date: '2016-05-09', hour: '14:00-22:00', type: '晚班'},
          {jobNumber: '0001', name: '小明', date: '2016-05-10', hour: '14:00-22:00', type: '晚班'},
          {jobNumber: '0001', name: '小明', date: '2016-05-11', hour: '14:00-22:00', type: '晚班'},
          {jobNumber: '0001', name: '小明', date: '2016-05-12', hour: '14:00-22:00', type: '晚班'},
          {jobNumber: '0001', name: '小明', date: '2016-05-13', hour: '14:00-22:00', type: '晚班'}
        ],
        currentPage: 1,//默认显示第一页
        pageSize: 5,//默认每页显示5条
        search: '',
        loginAllInfo: [],
      }
    },
    // created() {
    //   console.log(this.$store.state.lajStore.testMsg);
    //   this.getData();
    //   let {number} = this.loginAllInfo;
    //   this.schedule({number}).then(res => {
    //     console.log(res.data.staff)
    //   })
    // },
    computed: {//在
      // 模糊搜索
      tables() {
        const search = this.search;
        if (search) {
          return this.tableData.filter(data => {
            return Object.keys(data).some(key => {
              return String(data[key]).toLowerCase().indexOf(search) > -1
            })
          })
        }
        return this.tableData
      }
    },
    methods: {
      ...mapActions(['schedule']),
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;    //动态改变
      },
      getData() {
        this.loginAllInfo = JSON.parse(sessionStorage.getItem('loginAllInfo'));
        // console.log(this.loginAllInfo)
      }
    }
  }
</script>

<style scoped lang="less">
  #myPage {
    text-align: center;
  }
</style>
